<!DOCTYPE html>
<html lang="zh">
{include file="public/head"}
<link rel="stylesheet" type="text/css" href="/static/admin/js/webuploader/webuploader.css">
<body>
<div class="container-fluid">
  
  <div class="row">
    
    <div class="col-lg-12">
      <div class="card">
        <div class="card-body">
          
          <form class="row" id="common_form" action="{$action}" method="post">
            <div class="mb-3 col-md-12">
              <label for="username" class="form-label">图片</label>
              <div class="d-flex">
                <img src="/static/admin/images/default_avatar.jpeg" class="show_upload_file" style="width: 80%;height: 240px;">
                <input type="hidden" name="image" class="file_path_value" value="/static/admin/images/default_avatar.jpeg">
                <div>
                  <div class="filePicker">上传图片</div>
                  <button type="button" class="btn btn-success" onclick="openLayer('选择图片', '/admin/common/selectImage',100,100)">选择图片</button>
                </div>
              </div>
            </div>
            <div class="mb-3 col-md-12">
              <label for="expected_time" class="form-label">大文件分片上传</label>
              <div class="clearfix">
                <div class="filePicker_v2">选择文件</div>
                <label id="file_name"></label>
                <label id="file_size">&nbsp;&nbsp;&nbsp;&nbsp;</label>
                <label id="file_time">&nbsp;&nbsp;&nbsp;&nbsp;</label>
                <div class="progress-bar" role="progressbar" style="width: 0%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">0%</div>
              </div>
            </div>
            <div class="mb-3 col-md-12">
              <label for="title" class="form-label">banner标题</label>
              <input type="text" class="form-control" id="title" name="title" value="" placeholder="请输入banner标题" />
            </div>
            <div class="mb-3 col-md-12">
              <label for="link" class="form-label">链接地址</label>
              <input type="text" class="form-control" id="link" name="link" value="" placeholder="请输入链接地址"  />
            </div>
            <div class="mb-3 col-md-12">
              <label for="sort" class="form-label">显示排序</label>
              <input type="text" class="form-control" id="sort" name="sort" value="99" />
            </div>
            <div class="mb-3 col-md-12">
              <label for="status" class="form-label">状态</label>
              <div class="clearfix">
                <div class="form-check form-check-inline">
                  <input type="radio" id="status" name="status" class="form-check-input" value="1" checked>
                  <label class="form-check-label" for="status">显示</label>
                </div>
                <div class="form-check form-check-inline">
                  <input type="radio" id="status" name="status" class="form-check-input" value="0">
                  <label class="form-check-label" for="status">不显示</label>
                </div>
              </div>
            </div>
            <input type="hidden" id="jump_url" value="{$action}">
            <div class="mb-3 col-md-12">
              <button type="submit" class="btn btn-primary ajax-post" target-form="add-form">确 定</button>
              <button type="button" class="btn btn-default" id="close_layer_open">返 回</button>
            </div>
          </form>
          
        </div>
      </div>
    </div>
        
  </div>
  
</div>
{include file="public/script"}

<script type="text/javascript" src="/static/admin/js/webuploader/webuploader.js"></script>
<script type="text/javascript">
uploader = WebUploader.create({
    auto: true,
    server: '/admin/common/uploadImage',
    pick: {
        id:'.filePicker',
        //是否开启多个文件选择能力
        multiple:false,
    },
    formData: {
         _token:''
    },
    fileVal:'file',
})
//上传成功时的回调方法
uploader.on('uploadSuccess',function (file,res) {
    if(res.code == 200)
    {
        $('.file_path_value').val(res.data);
        $('.show_upload_file').attr('src', res.data);
    }else{
        showNotify(res.msg, 'danger', 1000, 'mdi mdi-information-outline', 'top', 'right');
    }
})
uploader.on( 'uploadError', function( file ) {
    showNotify('上传文件失败', 'danger', 1000, 'mdi mdi-information-outline', 'top', 'right');
});
</script>
<script type="text/javascript">

var GUID = WebUploader.Base.guid();
// 初始化Web Uploader
var uploader = WebUploader.create({
    // 选完文件后，是否自动上传。
    auto: true,
    // swf文件路径
    swf: '/static/admin/js/webuploader/Uploader.swf',
    // 文件接收服务端。
    server: '/admin/common/chunkUpload',
    pick: {
        id:'.filePicker_v2',
        //是否开启多个文件选择能力
        multiple:false,
    },
    chunked: true,   //开启分片上传
    chunkSize: 2*1024*1024,   //分片大小
    threads: 1,               //上传并发数。允许同时最大上传进程数。
    formData: {guid: GUID, is_chunk:1},   //guid：任务号
    //fileSingleSizeLimit:30*1024*1024,  //文件大小限制
    fileVal:'file',
    duplicate: true,  //可否可以重复上传相同文件（如果为true，则相同文件可以重复上传）
});

uploader.on('uploadProgress',function (file,percentage ) {
    //显示进度条
    show_rate = Math.floor(percentage* 100);
    $('.progress-bar').css({width:show_rate+'%'});
    $('.progress-bar').text(show_rate+'%');
})

//上传成功时的回调方法
uploader.on('uploadSuccess',function (file,res) {
    if(res.code == 100)
    {
        //$('#file_path').html('&nbsp;&nbsp;&nbsp;&nbsp;文件地址：'+res.data.file_path);
        //$('#file_path').attr('href', res.data.file_path);
        $('#file_name').text('文件名称：'+res.data.file_name);
        $('#file_size').html('&nbsp;&nbsp;&nbsp;&nbsp;文件大小：'+res.data.size);
        $('#file_time').html('&nbsp;&nbsp;&nbsp;&nbsp;上传时间：'+res.data.time);
    }else{
        
    }
})

</script>
</body>
</html>